class TransImg{
    static count = 0 ;
    constructor(containerEle,imgArr){
        this.containerEle = containerEle ; 
        this.w = parseInt(getStyle(this.containerEle,"width"));
        this.h = parseInt(getStyle(this.containerEle,"height"));
        this.arr = imgArr ; 
        this.createImg();
        this.createPort();
        this.createNP();
        this.chanPlay();
        this.autoPlay();
    }
    createImg(){
        this.arr.forEach((item,key)=>{
            let imgEle = document.createElement("img"); 
            imgEle.src = item ;
            imgEle.style.position = "absolute" ;
            if( key == 0 ){
                imgEle.style.zIndex = 1 ;
            }
            imgEle.style.width = this.w + "px"; 
            imgEle.style.height = this.h + "px";
            imgEle.style.transition = "opacity 2s" ;
            this.containerEle.appendChild(imgEle);
        });
    }
    createPort(){
        let divEle = document.createElement("div");
        divEle.className = "portBox" ;
        divEle.style.position = "absolute" ; 
        divEle.style.width = "60%" ;
        divEle.style.zIndex = 1 ; 
        divEle.style.height = "20px" ; 
        divEle.style.bottom = "8%" ;
        divEle.style.left = "50%" ;
        divEle.style.transform = "translateX(-50%)" ; 
        divEle.style.display = "flex" ;
        divEle.style.justifyContent = "space-evenly" ;
        this.arr.forEach((item,key)=>{
            let spanEle = document.createElement("span");
            spanEle.style.width = "20px" ; 
            spanEle.style.height = "20px" ;
            if( key == 0 ){
                spanEle.style.backgroundColor = "blue" ;
            } else {
                spanEle.style.backgroundColor = "white" ;
            }
            spanEle.style.borderRadius = "50%" ;
            divEle.appendChild(spanEle);
        });
        this.containerEle.appendChild(divEle);
    }
    render(){
        let imgEles = this.containerEle.querySelectorAll("img");
        let spanEles = this.containerEle.querySelectorAll("span");
        imgEles[0].style.zIndex = 1 ;
        spanEles[0].style.backgroundColor = "blue" ;
    }
    createNP(){
        let div1Ele = document.createElement("div");
        let div2Ele = document.createElement("div");
        div1Ele.className = "next" ;
        div1Ele.innerHTML = ">" ;
        div1Ele.style.fontSize = "35px" ;
        div2Ele.className = "prev" ;
        div2Ele.innerHTML = "<" ;
        div2Ele.style.fontSize = "35px" ;
        div1Ele.style.position = "absolute" ;
        div2Ele.style.position = "absolute" ;
        div2Ele.style.left = "15px" ;
        div1Ele.style.right = "10px" ;
        div1Ele.style.top = "50%" ;
        div2Ele.style.top = "50%" ;
        div1Ele.style.transform = "translate(-50%)" ;
        div2Ele.style.transform = "translate(-50%)" ;
        div1Ele.style.zIndex = 1 ;
        div2Ele.style.zIndex = 1 ;
        this.containerEle.appendChild(div1Ele)
        this.containerEle.appendChild(div2Ele)
    }
    autoPlay(){
        let imgEles = this.containerEle.querySelectorAll("img");
        let spanEles = this.containerEle.querySelectorAll("span");
        const _that = this ; 
        let timer = setInterval(()=>{
            TransImg.count ++ ;
            if( TransImg.count == _that.arr.length ){
                TransImg.count = 0 ;
            }
            imgEles.forEach((item,key)=>{
                if( key == TransImg.count ){
                    item.style.opacity = 1 ;
                    spanEles[key].style.backgroundColor = "blue" ;
                } else {
                    item.style.opacity = 0 ;
                    spanEles[key].style.backgroundColor = "white" ;
                }
            });
        },3500)
        this.containerEle.onmouseenter = function (){
            clearInterval(timer);
        }
        this.containerEle.onmouseleave = function (){
            _that.autoPlay();
        }
    }
    chanPlay(){
        let nextEle = this.containerEle.querySelector(".next");
        let prevEle = this.containerEle.querySelector(".prev");
        let imgEles = this.containerEle.querySelectorAll("img");
        let spanEles = this.containerEle.querySelectorAll("span");
        const _that = this ; 
        nextEle.onclick = function (){
            TransImg.count ++ ;
            imgEles.forEach((item,key)=>{
                item.style.opacity = 0 ; 
                spanEles[key].style.backgroundColor = "white" ;
            });
            if( TransImg.count == _that.arr.length){
                TransImg.count = 0 ;
            }
            imgEles[TransImg.count].style.opacity = 1 ;
            spanEles[TransImg.count].style.backgroundColor = "blue" ;
        }
        prevEle.onclick = function (){
            if( TransImg.count == 0 ){
                TransImg.count = _that.arr.length ;
            }
            TransImg.count -- ;
            imgEles.forEach((item,key)=>{
                item.style.opacity = 0 ; 
                spanEles[key].style.backgroundColor = "white" ;
            });
            imgEles[TransImg.count].style.opacity = 1 ;
            spanEles[TransImg.count].style.backgroundColor = "blue" ;
        }
        spanEles.forEach((item,key)=>{
            item.onclick = function (){
                TransImg.count = key ;
                spanEles.forEach((spanEle,index)=>{
                    if( key == index ){
                        spanEle.style.backgroundColor = "blue" ;
                        imgEles[key].style.opacity = 1 ;
                    } else {
                        spanEle.style.backgroundColor = "white" ;
                        imgEles[index].style.opacity = 0 ;
                    }
                });
            }
        });
    }
}
function getStyle(ele,styleName){
    if(window.getComputedStyle){
        return getComputedStyle(ele,"null")[styleName] ;
    } else {
        return ele.currentStyle[styleName] ; 
    }
}